<script setup>
import { computed, onMounted, ref } from 'vue'

defineOptions({
  name: 'HomeCards'
})
const cardText = ref([
  {
    name: 'HD161A',
    url: 'http://localhost/hu/resources/js/assets/img/HD161A.png',
    desc: '强劲除湿立竿见影配备高效压缩机，性能卓越......'
  },
  {
    name: 'PD253A',
    url: 'http://localhost/hu/resources/js/assets/img/PD253A.png',
    desc: '30%~80%RH大范围湿度设定，环境湿度由......'
  },
  {
    name: 'PD253D',
    url: 'http://localhost/hu/resources/js/assets/img/PD253D.png',
    desc: '强劲除湿立竿见影配备高效压缩机，性能卓越......'
  },
  {
    name: 'PD253B',
    url: 'http://localhost/hu/resources/js/assets/img/PD253B.png',
    desc: '30%~80%RH大范围湿度设定，环境湿度由......'
  }
])
const id = ref(0)
const hand = ref(false)
const tog = (index) => {
  hand.value = false
  id.value = index
  setTimeout(() => (hand.value = true), 0)
}
const mapData = computed(() => {
  if (!id.value) return cardText.value
  const url = [
    'http://localhost/hu/resources/js/assets/img/HD161A.png',
    'http://localhost/hu/resources/js/assets/img/PD253A.png',
    'http://localhost/hu/resources/js/assets/img/PD253D.png',
    'http://localhost/hu/resources/js/assets/img/PD253B.png'
  ]
  return [
    {
      name: 'HD161A',
      url: 'http://localhost/hu/resources/js/assets/img/HD161A.png',
      desc: '强劲除湿立竿见影配备高效压缩机，性能卓越......'
    },
    {
      name: 'PD253A',
      url: 'http://localhost/hu/resources/js/assets/img/PD253A.png',
      desc: '30%~80%RH大范围湿度设定，环境湿度由......'
    },
    {
      name: 'PD253D',
      url: 'http://localhost/hu/resources/js/assets/img/PD253D.png',
      desc: '强劲除湿立竿见影配备高效压缩机，性能卓越......'
    },
    {
      name: 'PD253B',
      url: 'http://localhost/hu/resources/js/assets/img/PD253B.png',
      desc: '30%~80%RH大范围湿度设定，环境湿度由......'
    }
  ].map((item) => {
    item.url = url[id.value - 1]
    return item
  })
})
const cards = ref(null)
onMounted(() => {
  window.addEventListener('scroll', () => {
    if (!cards.value) return
    if (window.scrollY > cards.value.offsetTop / 8) {
      hand.value = true
    }
  })
})
</script>

<template>
  <ul class="list nav my-4 justify-content-center nav-pills" role="tablist">
    <li
      class="nav-item"
      v-for="(value, index) in [
        '除湿器',
        '加湿器',
        '烘干机',
        '新风净化机',
        '移动空调'
      ]"
      :key="value"
      style="cursor: pointer"
    >
      <a
        class="nav-link"
        :class="id === index ? 'active' : ''"
        @click="tog(index)"
        >{{ value }}</a
      >
    </li>
  </ul>
  <div class="content row" ref="cards">
    <transition-group appear>
      <transition
        v-for="(value, index) in mapData"
        :key="index"
        :style="{ '--delay': `${(index + 1) * 0.3}s` }"
        :duration="{ enter: 2000, leave: 0 }"
      >
        <div class="col-12 col-lg-3 position-relative" v-if="hand">
          <div class="card">
            <div class="card-body">
              <div class="bg-light">
                <img
                  :src="value.url"
                  class="img-fluid d-block mx-auto"
                  alt=""
                />
              </div>
              <div class="card-footer bg-white">
                <h5>{{ value.name }}</h5>
                <p class="text-secondary">{{ value.desc }}</p>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </transition-group>
  </div>
</template>

<style lang="scss" scoped>
.list {
  a:not(.active) {
    color: gray;
  }
  a.active {
    background-color: #104094;
  }
}

.v-enter-from {
  opacity: 0;
  top: 50px;
  transition-delay: var(--delay);
}
.v-enter-to {
  opacity: 1;
  top: 0px;
  transition: 0.5s;
  transition-delay: var(--delay);
}
</style>
